/**
 * Fixedbtn
 */

 import consts from "../../../../../consts/consts";
 import Header from "../Header";
 import Footer from "../Footer";
 import ColorPicker from "../ColorPicker";
 import React,{Component} from "react";

 class Fixedbtn extends Component{
    componentWillMount(){
        this.classNames = {
            call: "call-icon",
            website: "website-icon",
            location: "location-icon",
            introduce: "introduce-icon",
            playVideo: "playvideo-icon",
            pageJump: "pagejump-icon",
            animation: "animation-icon",
            materials: "materials-icon",
            animations: "animations-icon"
        };
    }
    handleOnChangeImage(){
        const {data} = this.props;
        console.log('open dialog');
//        root.openDialog(consts.WIDGET_TYPE.PICTURE, true, data, true);
    }
    render(){
        const {type,data,timelines,pages,selectedWidgetId,updateWidget,setState,selectContents} = this.props;
        let actionType = data.action.type;
        let detailType = consts.WIDGET_EVENTS_MAPPING[actionType];
        let className = this.classNames[consts.TEMPLATE_TYPE[actionType]];
        let focus = (data.widget_id == selectedWidgetId);
        
        let content = "";
        if (data.url){
            content =
                <div className="fixedbtn-container">
                    <img src={data.url} />
                </div>
        } else {
            content =
                <div className={"fixedbtn " + className} style={{ background: "#" + data.color }}>
                    <i></i>
                </div>
        }
        return (
            <div ref="content" className={"content-item " + (focus ? "focus " : " ") + (data.visible ? "unfold " : "fold ")} onClick={() => selectContents(data)}>
                <Header type={type} data={data} updateWidget={updateWidget} setState={setState} />
                <div className="content">
                    {content}
                    <div style={{ clear:"both" }}></div>
                    <button onClick={() => this.handleOnChangeImage()}>{$._("Replace")}{$._("Picture")}</button>
                </div>
                <Footer type={detailType} data={data} timelines={timelines} pages={pages} updateWidget={updateWidget} setState={setState}/>
            </div>
        )
    }
 };

 module.exports = Fixedbtn;
